<template>
  <el-container>
    <el-main>
      <div>
        <el-upload
          v-loading="Push_loading"
          class="avatar-uploader"
          drag
          action="/v1/file/push"
          :before-upload= "Update"
          :on-success="Success"
          :show-file-list= "false"
          >
          
        </el-upload>
    </div>
      
    </el-main>
  </el-container>
    
</template>

<!-- element-loading-text="文件正在上传中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)" -->

<script>

import {fileUp} from '../../api/api';
import {loading} from "element-ui"
export default {
    name: 'FilePush',
    data(){
        return { 
            fileUrl: '',
            Push_loading : false,

        }
    },
    mounted:function () {
    },//mounted
    methods: {
      Update(file, fileList){
        if (this.Push_loading == true) {
          this.Push_loading = false;
        }else{
          this.Push_loading = true;
        }
      },
      LoadCancel(){
        console.log("取消加载");
        this.Push_loading = false;
        return
      },
      Success(res, file) {
        var that = this;
        that.fileUrl = res.data;
        that.LoadCancel()
        if (res.code == 200){
            that.$message("上传成功"+this.fileUrl);
            
            if(file.raw.type == "image/png" || file.raw.type == "text/plain" || file.raw.type == "audio/wav" || file.raw.type == "video/mp4"){
              window.open(that.fileUrl,"_blank");
            }
            
        }else{
           that.$message.error("上传失败"); 
        }
          
      }

        
    } //methods
}
</script>

<style>
.avatar-uploader .el-upload {
    /*border: 1px dashed #d9d9d9;*/
    /*border-radius: 4px;*/
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 82px;

  }
  .el-upload-dragger{

    width: 100px;
    height: 100px

  }
  .el-upload__text {
    margin-top: 50px;
    margin-left: 2px;
  }
  /*.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }*/
/*  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 58px;
    height: 58px;
    line-height: 95px;
    text-align: center;
  }*/
  /*.avatar {
    width: 108px;
    height: 158px;
    display: block;
  }*/
</style>
